<template>
  <div>

      <div style="margin-bottom:15px">
        <el-input v-model="params.tutorName" style="width:200px" placeholder="输入家教姓名"></el-input>
        <el-input v-model="params.typeName" style="width:200px;margin-left:5px" placeholder="输入学科"></el-input>
        <el-button type="warning" style="margin-left:10px" @click="findBySearch()">查询</el-button>
        <el-button type="warning" style="margin-left:10px" @click="reset()">清空</el-button>
        <el-button type="success" style="margin-left:10px" @click="sendMessage()">发送短信</el-button>
        <el-button type="success" style="margin-left:10px" @click="sendEmails()">发送邮件</el-button>
        <el-button type="primary" style="margin-left:10px" @click="add()" v-if="user.role === 'ROLE_ADMIN'">添加</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          
          <el-table-column prop="tutorName" label="家教姓名" ></el-table-column>
          
          <el-table-column prop="studentName" label="学生姓名"></el-table-column>
          <el-table-column prop="typeName" label="学科"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="pay"   label="是否已支付"></el-table-column>
          <!-- <el-table-column prop="status" label="Audit status"></el-table-column>
          <el-table-column prop="reason" label="Review comments"></el-table-column> -->
          <!-- <el-table-column prop="time" label="Booking time"></el-table-column> -->
          
          <el-table-column  label="操作" width="350px">
            <template slot-scope="scope">
        
              <el-button type="success" @click="communicate(scope.row)" v-if="scope.row.pay ==='Paid'">留言</el-button>
              <el-button type="danger" @click="chat()" v-if="scope.row.pay ==='Paid'">在线聊天</el-button>
              <!-- <el-button type="success" @click="communicate(scope.row)" v-if="scope.row.pay ==='Paid'">Communicate</el-button> -->
                     
              <el-popconfirm title="Are you sure to delete?" @confirm="del(scope.row.id)">
                <el-button slot="reference" type="danger" style="margin-left:5px" v-if="user.role === 'ROLE_ADMIN'">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="danger">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

        <div style="margin-top: 10px;">
          
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="params.pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="params.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
        </div>

        <!-- 短信 -->

        <div>

          <el-dialog title="Please enter the message content" :visible.sync="auditVisible" width="45%">
            <!-- <el-form :model="form"> -->
            <el-form>
              <el-form-item label="SMS content" label-width="15%">
                <el-input v-model="message" autocomplete="off" style="width:90%"></el-input>
              </el-form-item>        
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="auditVisible = false">取消</el-button>
              <el-button type="primary" @click="send()">确定</el-button>
            </div>
          </el-dialog>

        </div>

             <!-- 沟通平台 -->
        <div>

          <el-dialog title="Communication Platform" :visible.sync="dialogCommunicateVisible" width="60%">
            <el-form :model="form">
              
              <el-form-item  label-width="8%">
                <!-- <div id="editor" style="width:90%"></div> -->
                <!-- <div id="editorCommunicate" style="width:90%"></div> 改为唯一的ID -->
                <div id="editor-communicate" style="width:90%"></div>
              </el-form-item>
              
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogCommunicateVisible = false">取消</el-button>
              <el-button type="primary" @click="submit()">确定</el-button>
            </div>
          </el-dialog>

        </div>
             <!-- 发送邮件 -->
        <div>

          <el-dialog title="Please fill in the information" :visible.sync="dialogEmailVisible" width="70%">
            <el-form>
              <el-form-item label="邮件发送地址" label-width="15%">
                <el-input v-model="setFrom" autocomplete="off" style="width:85%"></el-input>
              </el-form-item>
            

              <el-form-item label="邮件接收地址" label-width="15%">
                <el-input v-model="setTo" autocomplete="off" style="width:85%"></el-input>
              </el-form-item>

              <el-form-item label="主题" label-width="15%">
                <el-input v-model="subject" autocomplete="off" style="width:85%"></el-input>
              </el-form-item>

              

              <el-form-item label="邮件内容" label-width="15%">
                <div id="editor-email" style="width:85%"></div>
                <!-- <div id="editor" style="width:85%"></div> -->
                <!-- <div id="editorEmail" style="width:85%"></div> 改为唯一的ID -->
              </el-form-item>
              
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEmailVisible = false">取消</el-button>
              <el-button type="primary" @click="sendEmail()">确定</el-button>
            </div>
          </el-dialog>

        </div>
        <!-- 邮件内容结束 -->

  </div>
</template>

<script>
import request from '@/utils/request'

import E from 'wangeditor'

let editor
// function initWangEditor(content) {	setTimeout(() => {
//   if (!editor) {
//     editor = new E('#editor')
//     editor.config.placeholder = '请输入内容'
//     editor.config.uploadFileName = 'file'
//     //文件上传的接口
//     editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
//     editor.create()
//   }
//   editor.txt.html(content)
// }, 0)
// }

function initWangEditor(el, content = '') {
  const editorInstance = new E(el);
  editorInstance.config.placeholder = '请输入内容';
  editorInstance.config.uploadFileName = 'file';
  editorInstance.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload';
  editorInstance.create();
  editorInstance.txt.html(content);
  return editorInstance; // 返回独立实例
}


    export default {
      data() {
        return {
          params:{
            tutorName:'',
            typeName:'',
            pageNum:1,
            pageSize:5
          },
          tableData: [],
          total: 0,
          //dialogFormVisible: false,
          //form:{},
          //dialogFormVisible: false,
          message:'',
          editorVisible:false,
          dialogCommunicateVisible:false,
          viewData:'',
          typeObjs:[],
          auditVisible: false,
          dialogEmailVisible: false,
          form:{},
          subject:'',
          setText:'',
          setTo:'',
          setFrom:'',
          communicateEditor: null, // 记录沟通平台的编辑器实例
          emailEditor: null,       // 记录发送邮件的编辑器实例
          //setFrom: user.email,
          user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
        }
      },
      //页面加载的时候，做一些事情，在created里面
      created(){
         this.findBySearch();
         this.findTypes();
      },
      //定义一些页面上空间触发的事件调用的方法
      methods:{ 
        findBySearch(){
          request.get("/hire/search",{
            params:this.params
          }).then(res =>{
            if(res.code === '0'){
              this.tableData = res.data.list
              this.total = res.data.total
            }else{
                  this.$message.error(res.msg)
            }
          })
        },
        add(){
          this.form = {}
          this.dialogFormVisible = true
        },
        communicate(obj){
           this.form = obj
          //  initWangEditor(obj.content ?this.form.content: "")
           this.$nextTick(() => {
              // this.communicateEditor = initWangEditor('#editor-communicate', obj.content || '');
              this.communicateEditor = initWangEditor('#editor-communicate', this.form.content || '');
           });
          //  initWangEditorCommunicate(obj.content ? this.form.content : "");
           this.dialogCommunicateVisible = true
        },
        submit(){
          //alert(this.message)
          //this.form.content = editor.txt.html()
          this.form.content = this.communicateEditor.txt.html(); // 使用对应实例
          request.put("/hire/interact",this.form).then(res =>{
            if(res.code === '0'){
                this.$message.success("Message successfully left")
                this.dialogCommunicateVisible = false
                this.findBySearch()
            }else{
                this.$message.error(res.msg)
            }
          })
        },
        send(){
          //alert(this.message)
          let param ={
            message : this.message
          }
          request.get("/admin/sendMsg",{
            params:param
          }).then(res =>{
            if(res.code === '0'){
                this.$message.success("SMS sent successfully")
                this.auditVisible = false
                this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },
        edit(obj){
          this.dialogFormVisible = true
          this.form = obj

        },
        reset(){
           this.params={
            pageNum:1,
            pageSize:5,
            name:'',
            author:''
           }
           this.findBySearch()
        },
        sendMessage(){
          
          this.auditVisible = true
        },
        submit(){
          // this.form.content = editor.txt.html()
          this.form.content = this.communicateEditor.txt.html(); // 使用对应实例
          request.put("/hire/interact",this.form).then(res =>{
            if(res.code === '0'){
                this.$message.success("Communication successful")
                this.dialogCommunicateVisible = false

                this.findBySearch();
                
            }else{
                            this.$message.error(res.msg)
            }
          })
        },

        sendEmails(){
            this.dialogEmailVisible = true
            // initWangEditor("")
            this.$nextTick(() => {
              this.emailEditor = initWangEditor('#editor-email', '');
            });
            // initWangEditorEmail("");
        },
        sendEmail(){
          let param ={
            subject : this.subject,
            // setText : editor.txt.html(),
            setText: this.emailEditor.txt.html(), // 使用对应实例
            setTo : this.setTo,
            setFrom : this.setFrom
          }
          request.get("/admin/sendEmail",{
            params:param
          }).then(res =>{
            if(res.code === '0'){
                this.$message.success("Email sent successfully")
                this.dialogEmailVisible = false

                this.findBySearch();
                //location.reload()
                // this.findBySearch();
                // this.findTypes();

                // this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },
        chat(){
           this.$router.push('/chat');
        },
        
        handleSizeChange(pageSize){
           this.params.pageSize = pageSize
           this.findBySearch()
        },
        handleCurrentChange(pageNum){
          this.params.pageNum = pageNum
           this.findBySearch()
        },
        del(id){
          request.delete("/reserve/"+id).then(res =>{
            if(res.code === '0'){
              this.$message.success("Delete successfully")
              this.findBySearch()
            }else{
              this.$message.error(res.msg)
            }
          })
        },
  
      }
    }
  </script>